<template>
  <div class="search col">
    <van-swipe :autoplay="3000" class="swiper" dicator-color="white">
      <van-swipe-item v-for="(item,index) in swipers" :key="index">
        <img class="img" :src="item.url" alt />
      </van-swipe-item>
    </van-swipe>
    <div class="lines"></div>
    <div class="title">Ins复古翠绿</div>
    <div class="tags">
      <div class="tag">林白</div>
      <div class="tag">林白</div>
      <div class="tag">林白</div>
    </div>
    <div class="tags desc">商品介绍商品介绍商品介绍商品介绍商品介绍</div>
    <div class="tags prise">
      <span style="font-size:.20rem;">￥</span>999
    </div>
    <div class="lines"></div>
    <div class="cell">
      <span>请选择：</span>
      <span>规格</span>
      <img class="right" src="@/assets/icon/right.png" alt />
    </div>

    <div class="good_desc">
      <div class="intro">本商品为演示数据，不可支付</div>
      <div class="intro">本商品为演示数据，不可支付</div>
      <div class="intro">本商品为演示数据，不可支付</div>
      <div class="intro">本商品为演示数据，不可支付</div>
      <div class="intro">本商品为演示数据，不可支付</div>
      <div class="intro">本商品为演示数据，不可支付</div>
    </div>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="首页" @click="onClickButton" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickButton" />
      <van-goods-action-button type="warning" text="加入购物车" @click="onClickButton" />
      <van-goods-action-button type="danger" text="立即购买" @click="onClickButton" />
    </van-goods-action>

    <div class="sku" v-if="sku_show">
      <div class="mask" @click="sku_show = false"></div>
      <div class="sku_box">
        <div class="good_info">
          <img src class="good_img" />
          <div class="right_info">
            <span>标题</span>
            <span style="margin-top:.1rem;color:#3963bc">
              <span style="font-size:.20rem;">￥</span>{{sku_result.price}}
            </span>
            <span class="desc">标题 18 库存 {{sku_result.stock}}</span>
          </div>
        </div>
        <div class="lines"></div>
        <template v-for="item in sku">
          <div :key="item.name">
            <div class="type">{{item.name}}</div>
            <div class="tags" style="margin-bottom:.2rem;">
              <template v-for="sub in item.values">
                <div :class="['tag',item.choose == sub ? 'tag_on':'']" :key="sub" @click="chooseSku(item,sub)">{{sub}}</div>
              </template>
            </div>
          </div>
        </template>

        <div class="lines"></div>
        <div class="type">
          <span>购买数量</span>
        </div>
      </div>
      <div class="bottom">立即购买</div>
    </div>
  </div>
</template>

<script>
import { mixins } from '@/utils/mixins'
export default {
  mixins:[mixins],
  data() {
    return {
      sku_show: false,
      searching: true,
      swipers: [
        { url: require("@/assets/swiper/1.jpg") },
        { url: require("@/assets/swiper/2.jpg") },
        { url: require("@/assets/swiper/3.jpg") }
      ],
      good: {},
      sku: null,
      sku_result:{}
    };
  },
  computed:{
   
  },
  mounted() {
 
    this.getGood();
  },
  methods: {
    // 查询
    async getSku(nameStr){
      const res = await this.$api.goodsApi.getSku({product_specs:nameStr})

      this.sku_result = res.data.data || {};
    },
    getSkuName(){
      let nameArr = []
      for(let i of this.sku){
        nameArr.push( i.name+':'+i.choose );
        
      }
      let nameStr = nameArr.join(',')
      return nameStr
    },
    chooseSku(item,sku){
      if(item.choose == sku){
        item.choose = ''
      }else{
        item.choose = sku
      }

      this.getSku(this.getSkuName());
    },
    async getGood() {
      const res = await this.$api.goodsApi.getGood({ id: this.query.id });
      const good = res.data.data;
      this.good = good;
      const list = JSON.parse(good.attr_list || '[]');
      for(let i of list){
        i.choose = ''
      }
      this.sku =  list
    },
    onCancel() {
      this.searching = true;
    },
    onSearch() {},
    onClickButton() {
      this.sku_show = true;
    }
  }
};
</script>

<style lang="less" scoped>
.type {
  margin-top: 0.2rem;
  margin-left: 0.2rem;
}
.sku {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100%);
  display: flex;
  flex-direction: column;
  .mask {
    background: rgba(0, 0, 0, 0.5);
    height: 3rem;
    width: 100%;
  }
}
.bottom {
  padding: 0.2rem;
  background-color: #333;
  color: #fff;
  text-align: center;
}
.desc {
  font-size: 0.24rem;
  color: #999;
  margin-top: 0.1rem;
}
.sku_box {
  flex: 1;
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .good_info {
    display: flex;
    align-items: center;
    padding: 0.2rem;
    .good_img {
      width: 1.6rem;
      height: 1.6rem;
      background-color: #ccc;
    }
    .right_info {
      margin-left: 0.2rem;
      padding-top: 0.1rem;
      height: 1.6rem;
      display: flex;
      flex-direction: column;
    }
  }
}
.search {
  padding-bottom: 1rem;
}
.title {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 0.16rem;
  padding-left: 0.2rem;
  box-sizing: border-box;
  .line {
    width: 4px;
    height: 0.32rem;
    background-color: #3963bc;
    margin-left: 0.2rem;
  }
  .title_desc {
    font-size: 0.3rem;
    margin: 0 0.2rem;
  }
}
.good_desc {
  border: 1px dashed #3963bc;
  width: 7.1rem;
  margin: 0.2rem auto;
  padding: 0.2rem;
  display: flex;
  flex-direction: column;

  .intro {
    font-size: 0.26rem;
    color: #333;
    margin-bottom: 0.2rem;
  }
}
.cell {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  border-bottom: 1px solid #eee;
  font-size: 0.26rem;
  color: #999;
}
.right {
  width: 0.46rem;
  height: 0.46rem;
  margin-left: auto;
}
.lines {
  width: 100%;
  height: 1px;
  background-color: #f5f5f5;
}
.desc {
  font-size: 0.28rem;
  color: #999;
}
.tags {
  display: flex;
  margin-top: 0.2rem;
  padding-left: 0.2rem;
}
.tag {
  padding: 4px 8px;
  background-color: #d8e1f5;
  font-size: 0.28rem;
  margin-right: 0.2rem;
  color: #666;
}
.tag_on{
  background-color: #3963bc;
  color: #fff;
}
.swiper {
  // height: 3rem;
  .img {
    width: 100%;
  }
}
.prise {
  margin-bottom: 0.2rem;
}
</style>